import React from 'react';
import Link from 'next/link';

interface CardProps {
  title: string;
  location: string;
  department: string;
  link: string;
  isHighlighted?: boolean;
}

const Card: React.FC<CardProps> = ({
  title,
  location,
  department,
  link,
  isHighlighted = false
}) => {
  return (
    <Link href={link}>
      <div 
        className={`group h-full rounded-xl overflow-hidden transition-all duration-300 transform hover:-translate-y-2 ${
          isHighlighted 
            ? 'shadow-lg hover:shadow-xl bg-gradient-to-br from-blue-50 to-white border border-blue-100' 
            : 'shadow-md hover:shadow-xl bg-white border border-gray-100'
        }`}
      >
        <div className="p-7 h-full flex flex-col">
          {isHighlighted && (
            <div className="mb-4">
              <span className="px-3 py-1 text-xs font-medium bg-blue-100 text-blue-600 rounded-full">
                推荐职位
              </span>
            </div>
          )}
          
          <h3 className={`text-xl font-bold mb-3 group-hover:text-blue-600 transition-colors duration-300 ${
            isHighlighted ? 'text-blue-700' : 'text-gray-800'
          }`}>
            {title}
          </h3>
          
          <div className="flex items-center text-gray-600 mb-3">
            <svg className="w-5 h-5 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
            <span className="text-sm">{location}</span>
          </div>
          
          <div className="flex flex-grow items-start text-gray-600">
            <svg className="w-5 h-5 mr-2 mt-0.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
            </svg>
            <span className="text-sm">{department}</span>
          </div>
          
          <div className="mt-6 flex justify-between items-center">
            <div 
              className={`inline-flex items-center transition-all duration-300 ${
                isHighlighted ? 'text-blue-600' : 'text-gray-600 group-hover:text-blue-600'
              }`}
            >
              <span className="font-medium">查看详情</span>
              <svg 
                className={`w-5 h-5 ml-2 transform transition-transform duration-300 group-hover:translate-x-1 ${
                  isHighlighted ? 'text-blue-600' : 'text-gray-400 group-hover:text-blue-600'
                }`} 
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24" 
                xmlns="http://www.w3.org/2000/svg"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
              </svg>
            </div>
            
            {isHighlighted && (
              <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
                </svg>
              </div>
            )}
          </div>
        </div>
      </div>
    </Link>
  );
};

export default Card; 